<template>
  <div>
    <prism-editor
      class="my-editor height-300"
      :value="code"
      :highlight="highlighter"
      :line-numbers="lineNumbers"
      :readonly="readonlyType"
      :style="{ height }"
    ></prism-editor>
  </div>
</template>

<script>
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
export default {
  name: "Prism",
  components: {
    PrismEditor,
  },
  props: {
    code: {
      type: String,
      default: 'console.log("Hello World")',
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data: () => ({
    lineNumbers: true, // true 显示行号   false 不显示行号
    readonlyType: true, //true不可编辑   false 可编辑
  }),
  methods: {
    highlighter(code) {
      return highlight(code, languages.js); //returns html
    },
  },
};
</script>

<style lang="scss" scoped>
.my-editor {
  position: relative;
  background: #2d2d2d;
  color: #ccc;

  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional */
.prism-editor__textarea:focus {
  outline: none;
}
/* not required: */
.height-300 {
  height: 550px;
}
</style>